<script>
/**
 * @desc 主页面的'我的'
 */

import { mapState } from 'vuex'
import { navTo } from '@/utils'
import LoadingComp from '@/components/loading'
import TheBottomTabs from '@/components/the-bottom-tabs'
import icoRight from '@/assets/icons/arrow-right.svg'
import avatar from '@/assets/icons/account-avatar.jpg'
import icon01 from '@/assets/icons/account-icon-01.png'
import icon04 from '@/assets/icons/account-icon-04.png'
import icon06 from '@/assets/icons/account-icon-06.png'
import icon07 from '@/assets/icons/account-icon-07.png'

export default {
  name: 'account-page',

  components: { LoadingComp, TheBottomTabs },

  data: () => ({
    showLoading: true,
    showContent: false,
    icoRight,
    avatar,
    icon01,
    icon04,
    icon06,
    icon07,
    fnList: [
      { name: '分类管理', ico: icon01 },
      { name: '数据管理', ico: icon04 },
      { name: '关于我们', ico: icon06, to: 'about' },
      { name: '帮助', ico: icon07 }
    ]
  }),

  computed: {
    ...mapState(['systemInfo'])
  },

  methods: {
    navTo
  },

  mounted() {
    const contentTimer = setTimeout(() => {
      this.showContent = true
      clearTimeout(contentTimer)
    }, 1000)
    const loadingTimer = setTimeout(() => {
      this.showLoading = false
      clearTimeout(loadingTimer)
    }, 2000)
  }
}
</script>

<template>
  <div name="main-container">
    <div
      :class="$sty.container"
      v-show="showContent"
    >
      <div
        :style="{height:systemInfo.statusBarHeight+'px'}"
        name="system-status-bar"
      ></div>

      <div :class="$sty.accountInfoLayer">
        <div :class="$sty.layer">
          <img
            :class="$sty.avatar"
            :src="avatar"
            mode="aspectFill"
          >
          <p :class="$sty.nickName">darcrand</p>
          <div :class="$sty.dataBar">
            <span :class="$sty.dataItem">
              <b :class="$sty.dataTitle">已连续记账</b>
              <b :class="$sty.dataValue">46</b>
            </span>
            <span :class="$sty.dataItem">
              <b :class="$sty.dataTitle">记账总天数</b>
              <b :class="$sty.dataValue">97</b>
            </span>
            <span :class="$sty.dataItem">
              <b :class="$sty.dataTitle">记账总笔数</b>
              <b :class="$sty.dataValue">159</b>
            </span>
          </div>
        </div>
      </div>

      <scroll-view
        :class="$sty.functionList"
        scroll-y
      >
        <p
          :class="$sty.listItem"
          :key="i"
          @click="navTo(v.to)"
          v-for="(v,i) in fnList"
        >
          <img
            :class="$sty.itemIco"
            :src="v.ico"
            mode="aspectFill"
          >
          <span :class="$sty.itemName">{{v.name}}</span>
          <img
            :class="$sty.itemArrow"
            :src="icoRight"
            mode="aspectFill"
          >
        </p>
      </scroll-view>

      <the-bottom-tabs/>
    </div>

    <loading-comp :show="showLoading"/>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
